
import { React, Component } from 'react';
import './ChatList.css'
import { connect } from 'react-redux';
class ChatList extends Component {

  constructor(props) {
    super(props);
  }
  record = this.props.counter.chat.record;
  render () {
    return (
      <div  >
        {

          Object.keys(this.record).map((item, index) => {
            return <div key={item}>
              {localStorage.getItem("WsUid") != this.record[item].senderId && <div className='chat-msg chat-msg-it' >
                <div className='chat-left'>
                  <div className='chat-head'>
                    {this.record[item].senderId == "twlchat" && <img className='Fchat-img' src='/personalchat/33.jpg' alt="图片" />}
                    {this.record[item].senderId != "twlchat" && <img className='Fchat-img' src='https://c-ssl.duitang.com/uploads/item/201701/19/20170119215410_WF8VT.jpeg' alt="图片" />}

                  </div>
                </div>
                <div className='chat-content'>
                  <div className='chat-context-txt'>
                    <div> {this.record[item].message} </div>
                  </div>
                </div>
                <div className='chat-right'></div>
              </div>
              }


              {localStorage.getItem("WsUid") == this.record[item].senderId && <div className='chat-msg chat-msg-me'>
                <div className='chat-left'>
                </div>
                <div className='chat-content'>
                  <div className='chat-context-txt'>
                    <div >{this.record[item].message}</div>
                  </div>
                </div>
                <div className='chat-right'><div className='chat-head'>
                {this.record[item].senderId == "twlchat" && <img className='Fchat-img' src='/personalchat/33.jpg' alt="图片" />}
                    {this.record[item].senderId != "twlchat" && <img className='Fchat-img' src='https://c-ssl.duitang.com/uploads/item/201701/19/20170119215410_WF8VT.jpeg' alt="图片" />}
                </div></div>
              </div>
              }
            </div>
          })
        }
      </div>
    );
  }
}
const mapStateToProps = state => ({
  counter: state
});

export default connect(mapStateToProps)(ChatList)